import React, { memo, useEffect } from "react";
import "./My.css";
import { connect } from "react-redux";
import Scroll from "../../baseUI/scroll/index";

import * as actionTypes from "./store/actionCreators";
import * as api from "../../api";


import { Page,PageTitle } from "../../assets/global-style";


import Account from "../../components/my/account/Account";
import Browse from "../../components/my/browse/Browse";
import Member from "../../components/my/member/Member";
import Order from "../../components/my/order/index";
import Property from "../../components/my/property/index";
import Service from "../../components/my/service/index";

const My = (props) => {
  const { mystate } = props;

  // action
  const { getMyDataDispatch } = props;

  const { order = [], property = [], service = [] } = mystate;

  useEffect(() => {
    getMyDataDispatch();
  }, []);

  return (
    <Page>
      <PageTitle>个人中心</PageTitle>
      <Scroll direction={"vertical"} refresh={false}>
        <div className="my_wrapper">
          <div className="my_wrapper_top">
            <Account />
            <Browse />
            <Member />
          </div>
          <div className="my_wrapper_bottom">
            <Order order={order} />
            <Property property={property} />
            <Service service={service} />
          </div>
        </div>
      </Scroll>
    </Page>
  );
};

const mapStateToDispatch = (dispatch) => {
  return {
    getMyDataDispatch() {
      dispatch(actionTypes.getMyData());
    },
  };
};

const mapStateToProps = (state) => {
  return {
    mystate: state.my.mydata,
  };
};
export default connect(mapStateToProps, mapStateToDispatch)(memo(My));
